<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/goodsdetails.css" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<header id="header">
				<nav class="navbar navbar-expand-lg navbar-light bg-light">
					<div class="container-fluid">
						<a href="#" class="nav-logo navbar-brand">
							<img src="./public/images/M.png">
						</a>
						<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
						 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav me-auto mb-2 mb-lg-0">
								<li class="nav-item">
									<div class="nav_index">
										<a class="nav-link" aria-current="page" href="index.html">首页</a>
									</div>
								</li>
								<li>
									<my-short></my-short>
								</li>

							</ul>
							<div id="nav_right">
								
								<div id="nav_user">
									<a href="#">
										<i class="iconfont icon-shouye1"></i>
									</a>
								</div>
								<div id="nav_shoppingcart" class="float-right">
									<my-showcart></my-showcart>
								</div>
							</div>
						</div>
					</div>
				</nav>
			</header>

			<section id="goodsdetails" class="container" style="margin-top: 120px;">
				<my-goods></my-goods>
			</section>
		</div>
		<script src="js/jquery3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<template id="goodslist_infos">
			<div style="display: flex;">
				<li class="nav-item" v-for='a in goodslist.slice(0,4)'>
					<div class="nav_rim">
						<a class="nav-link" href="#">{{a.cat_name}}</a>
						<div class="show_rim">
							<div class="container">
								<ul class="rim_info">
									<li class="costume" v-for='bb in a.children.slice(0,4)'>
										<h4>{{bb.cat_name}}</h4>
										<ul>
											<li v-for='ccc in bb.children' @click="xxx(ccc.cat_id)">
												<img :src="ccc.cat_icon" />
												<h5>{{ccc.cat_name}}</h5>

											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>

				</li>
			</div>
		</template>

		<template id="goods-details">
			<div>
				<div class="shopping_info" v-for='item in detailslist' v-show="item.goods_name!=null">
					<div class="photo">
						<div class="small_photo">
							<img :src="item.goods_small_logo?item.goods_small_logo:'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'" />
						</div>
						<div class="big_photo">
							<img :src="item.goods_big_logo?item.goods_big_logo:'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'" />
						</div>
					</div>
					<div class="shopping_bannar">
						<div class="shopping_title">
							<h4>{{item.goods_name}}</h4>
							<span>￥<b>{{item.goods_price}}</b></span>
						</div>
						<div class="shopping_num">
							<span class="huodong">促销活动</span>
							<div id="sales_info">
								<div class="newpp">
									<span>新人礼</span>
									<h4>下载App 领新人大礼包，首单优惠购最低只要￥9.9</h4>
								</div>
								<div class="downsales">
									<span>直降</span>
									<h4>喜迎2021</h4>
								</div>
								<div class="free_lx">
									<span>免息</span>
									<h4>花呗6期免息</h4>
									<h5>每月低至￥{{(item.goods_price/6).toFixed(2)}}元</h5>
								</div>
							</div>
						</div>
						<div class="shop_button">
							<input type="button" class="intoshopcart" value="加入购物车" @click="inshopcart(item)" />
							<input type="button" class="nowshop" value="现在购买" />
						</div>
					</div>
				</div>

			</div>

		</template>
		<template id="goodscartlist_infos">
			<div @mouseover="mouseon()" @mouseout="mouseover()">
				<a href="shopcart.html">
					<i class="iconfont icon-shouye2"></i>
				</a>
				<div class="cartlist" v-show="cartflag">
					<div class="cartgoods" v-show="isfull">
						<div class="cartgoods_info" v-for="item in goodscartlist.message">
							<img :src="item.goods_small_logo" />
							<h4>{{item.goods_name.slice(0,8)}}...</h4>
							<h5>X{{item.num}}</h5>
						</div>
						<div class="cartbtn">							
							<span @click="xxxxx">去购物车</span>
						</div>
					</div>
					<div class="null" v-show="isnull">
						<img src="img/cart-empty-new.png" />
						<span>购物车还是空的!</span>
					</div>

				</div>
			</div>
		</template>
		<script type="text/javascript">
			var goods_id;
	
			Vue.component('my-short', {
				data: function() {

					return {
						goodslist: [],
					}
				},
				template: "#goodslist_infos",
				methods: {
					xxx: function(val) {
						var url = "goods.html?cid=" + val;
						console.log(url);
						window.location.href = url
					}
				},
				created: function() {
					axios.get('http://localhost:8080/mall/categories').then(function(ret) {
						this.goodslist = ret.data.message;
						// console.log(this.goodslist)
					}.bind(this));

				}
			});

			Vue.component('my-goods', {
				data: function() {
					return {
						detailslist: [],
						status
					}
				},
				template: "#goods-details",
				methods: {

					inshopcart: function(val) {
						console.log(val);
						axios.get('http://localhost:8080/mall/goods/addCart', {
							params: {
								goods_id: val.goods_id,
								goods_name: val.goods_name,
								num: 1,
								goods_price: val.goods_price,
								goods_small_logo: val.goods_small_logo
							}
						}).then(function(ret) {
							if (ret.status == 200) {
								alert("成功加入购物车!")
								console.log("xxxxxxxxxxxxxx")
							}
						})
					}
				},
				mounted: function() {
					var str = window.location.search.substr(1).split("?");
					goods_id = str[0].split("=")[1];

					axios.get('http://localhost:8080/mall/goods/findGoodsDetail?goods_id=' + goods_id).then(function(ret) {
						this.detailslist = ret.data.message;
					}.bind(this));

				}

			});
			Vue.component('my-showcart', {
				data: function() {
					return {
						goodscartlist: [],
						cartflag: false,
						isfull: true,
						isnull: false
					}
				},
				template: "#goodscartlist_infos",
				methods: {
					mouseon: function() {
						
						axios.get('http://localhost:8080/mall/goods/showCart').then(function(ret) {
							this.goodscartlist = ret.data.message;
						}.bind(this));

						// console.log(this.goodscartlist)
						console.log(this.goodscartlist.length)
						if (this.goodscartlist.length < 0) {
							this.isfull = false;
							this.isnull = true;
						}
						
						this.cartflag = true;
					},
					mouseover: function() {
						this.cartflag = false
					},
					xxxxx:function(){
						window.location.href="shopcart.html"
					}
				}
			})
			var vm = new Vue({
				el: '#app',
				data: {

				}
			});
		</script>
	</body>
</html>
